<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .account {
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="account">
    <h1 style="text-align: center;">注册</h1>
    <form class="form-horizontal" action="." method="post">{% csrf_token %}
        {% for field in form %}
            {% if field.name == 'code' %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0;">{{ field }}</div>
                        <div class="col-md-6"><p id="id_sendVerifyCode" onclick="sendVerifyCode()" class="btn btn-default">
                            获取验证码 </p>
                        </div>
                    </div>

                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                </div>
            {% endif %}
        {% endfor %}
        <button type="submit" class="btn btn-primary" name="register">注 册</button>
    </form>

</div>

<script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
<script type="text/javascript" src="{% static "js/layer.js" %}"></script>

<script>
	//短信验证码倒计时
	function countdownHandler(){
		var $button = $("#id_sendVerifyCode");
		// layer.msg("in the countdownHandler!")
		var number = 30;
		var countdown = function(){
			if (number == 0) {
				$button.attr("disabled",false);
				$button.html("获取验证码");
	            number = 30;
	            return;
	        } else {
	        	$button.attr("disabled",true);
	        	$button.html(number + "秒 重新发送");
	        	number--;
	        }
			setTimeout(countdown,1000);
		}
		setTimeout(countdown,1000);
	}
	//发送短信验证码
	function sendVerifyCode(){
		var phone_num =$("#id_mobile_phone").val().trim();
		// alert('the phone is '+ phone_num)
		if(phone_num == ''){
			layer.msg('请输入手机号码');
			return;
		}
		// var reg = /^1\d{10}$/; // r"^(1[3|4|5|6|7|8|9])\d{9}$"
        var reg = /^(1[3|4|5|6|7|8|9])\d{9}$/
		if(!reg.test(phone_num)){
			layer.msg('请输入合法的手机号码');
			return ;
		};
		$.ajax({
	        url: "{% url 'app01:send_sms' %}",
            type: "POST",
            data: {"tpl":'register', "phone":phone_num},
	        async : true,
	        success: function (data) {
	        	if(data == 'success'){
	        	    // layer.msg('success');
	        		countdownHandler();
	        		return ;
	        	}else{
                    layer.msg(e);
                    // window.location.reload();
                }
	        }
    	});
	}

</script>
</body>
</html>